<template>
    <div class='container'>
        <!-- 页面头部 -->
        <page-header title="作品详情" @heightChange="handleHeaderHeightChange" />

        <!-- 作品展示区 -->
        <view class="work-showcase">
            <image class="work-image" :src="workDetail.image" mode="aspectFill" />
            <view class="work-overlay">
                <view class="work-rank" v-if="workDetail.rank">
                    <view class="rank-text">第{{ workDetail.rank }}名</view>
                </view>
            </view>
        </view>

        <!-- 作品信息区 -->
        <view class="work-info-section">
            <view class="work-header">
                <view class="work-title">{{ workDetail.title }}</view>
                <view class="work-author">作者：{{ workDetail.author }}</view>
            </view>

            <view class="work-stats">
                <view class="stat-item">
                    <uni-icons type="heart" size="20" color="#ff4757"></uni-icons>
                    <view class="stat-text">{{ workDetail.votes }}票</view>
                </view>
                <view class="stat-item">
                    <uni-icons type="eye" size="20" color="#666"></uni-icons>
                    <view class="stat-text">{{ workDetail.views }}浏览</view>
                </view>
                <view class="stat-item">
                    <uni-icons type="chat" size="20" color="#666"></uni-icons>
                    <view class="stat-text">{{ workDetail.comments }}评论</view>
                </view>
                <view class="stat-item">
                    <uni-icons type="calendar" size="20" color="#666"></uni-icons>
                    <view class="stat-text">{{ workDetail.createTime }}</view>
                </view>
            </view>

            <view class="work-description">
                <view class="desc-title">作品描述</view>
                <view class="desc-content">{{ workDetail.description }}</view>
            </view>

            <view class="work-category">
                <view class="category-label">分类：</view>
                <view class="category-value">{{ workDetail.category }}</view>
            </view>
        </view>

        <!-- 投票操作区 -->
        <view class="vote-section">
            <view class="vote-info">
                <view class="vote-title">为这个作品投票</view>
                <view class="vote-desc">您的投票将帮助这个作品获得更好的排名</view>
            </view>
            <button class="vote-btn" :class="{ 'voted': workDetail.hasVoted }" @click="handleVoteButtonClick">
                <view>{{ workDetail.hasVoted ? '已投票' : '投票' }}</view>
            </button>
        </view>

        <!-- 相关作品推荐 -->
        <view class="related-works">
            <view class="section-header">
                <view class="header-left">
                    <uni-icons type="star" size="24" color="#007AFF"></uni-icons>
                    <view class="section-title">相关作品</view>
                </view>
                <view class="header-right" @click="handleToWorksListButtonClick">
                    <view class="list-link">查看更多</view>
                    <uni-icons type="right" size="16" color="#666"></uni-icons>
                </view>
            </view>
            <view class="related-list">
                <view class="related-item" v-for="(item, index) in relatedWorks" :key="item.id"
                    @click="handleRelatedWorkClick(item)">
                    <image class="related-image" :src="item.image" mode="aspectFill" />
                    <view class="related-info">
                        <view class="related-title">{{ item.title }}</view>
                        <view class="related-author">{{ item.author }}</view>
                        <view class="related-votes">{{ item.votes }}票</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 评论区域 -->
        <view class="comments-section">
            <view class="comments-header">
                <view class="comments-title">评论 ({{ commentsList.length }})</view>
                <view class="comment-btn" @click="handleCommentButtonClick">
                    <view>写评论</view>
                </view>
            </view>
            <view class="comments-list">
                <view class="comment-item" v-for="(comment, index) in commentsList" :key="comment.id">
                    <view class="comment-avatar">
                        <image class="avatar-image" :src="comment.avatar" mode="aspectFill" />
                    </view>
                    <view class="comment-content">
                        <view class="comment-user">{{ comment.username }}</view>
                        <view class="comment-text">{{ comment.content }}</view>
                        <view class="comment-time">{{ comment.createTime }}</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部导航栏 -->
        <page-bottom pageUrl="/pages-vote/Index" @navClick="handleTabClick" @heightChange="handleBottomHeightChange" />
    </div>
</template>

<script>
// 结构
import {
    defineComponent,
    onMounted,
    ref,
    reactive,
    computed
} from 'vue';
// 模块化
import PageHeader from '@/components/PageHeader.vue';
import PageBottom from '@/components/PageBottom.vue';

export default defineComponent({
    name: 'EntryDetail', // 组件名称
    props: {
        // 接收父组件数据

    },
    components: {
        PageHeader,
        PageBottom
    },
    // 主要是组件内交互事件
    setup(props, ctx) {
        // 这里没有this,直接使用props里数据
        // 进行数据的定义和初始化。object style interactive
        onMounted(() => { });

        // ===== 响应式对象 =====
        // 头部高度相关数据
        const headerHeight = ref(0);
        const bottomHeight = ref(0);

        // 作品详情数据
        const workDetail = ref({
            id: 1,
            title: '创新项目A',
            author: '张三',
            description: '这是一个具有创新性的项目，展现了团队协作和创新能力。项目采用了最新的技术栈，在用户体验和性能优化方面都取得了显著成果。通过这个项目，我们不仅解决了实际问题，还为团队积累了宝贵的技术经验。',
            image: '/static/images/work1.jpg',
            votes: 156,
            views: 234,
            comments: 23,
            rank: 1,
            hasVoted: false,
            createTime: '2024-03-15',
            category: '技术创新'
        });

        // 相关作品数据
        const relatedWorks = ref([
            {
                id: 2,
                title: '技术突破B',
                author: '李四',
                image: '/static/images/work2.jpg',
                votes: 142
            },
            {
                id: 3,
                title: '服务优化C',
                author: '王五',
                image: '/static/images/work3.jpg',
                votes: 128
            },
            {
                id: 4,
                title: '创意设计D',
                author: '赵六',
                image: '/static/images/work4.jpg',
                votes: 98
            }
        ]);

        // 评论列表数据
        const commentsList = ref([
            {
                id: 1,
                username: '用户A',
                avatar: '/static/images/avatar1.jpg',
                content: '这个作品很有创意，技术实现也很棒！',
                createTime: '2024-03-15 14:30'
            },
            {
                id: 2,
                username: '用户B',
                avatar: '/static/images/avatar2.jpg',
                content: '支持这个项目，希望能看到更多类似的作品。',
                createTime: '2024-03-15 16:20'
            },
            {
                id: 3,
                username: '用户C',
                avatar: '/static/images/avatar3.jpg',
                content: '作品质量很高，值得学习借鉴。',
                createTime: '2024-03-15 18:45'
            }
        ]);

        // ===== 方法函数 =====
        // 处理头部高度变化
        const handleHeaderHeightChange = (heightInfo) => {
            headerHeight.value = heightInfo.totalHeaderHeight;
        };

        // 处理底部高度变化
        const handleBottomHeightChange = (heightInfo) => {
            bottomHeight.value = heightInfo.totalBottomHeight;
        };

        // 处理投票按钮点击
        const handleVoteButtonClick = () => {
            if (workDetail.value.hasVoted) {
                uni.showToast({
                    title: '您已经投票给此作品',
                    icon: 'none'
                });
                return;
            }

            uni.showModal({
                title: '确认投票',
                content: `确定要投票给"${workDetail.value.title}"吗？`,
                success: (res) => {
                    if (res.confirm) {
                        // TODO: 调用投票接口
                        workDetail.value.hasVoted = true;
                        workDetail.value.votes += 1;
                        uni.showToast({
                            title: '投票成功',
                            icon: 'success'
                        });
                    }
                }
            });
        };

        // 处理相关作品点击
        const handleRelatedWorkClick = (work) => {
            uni.navigateTo({
                url: `/pages-vote/EntryDetail?id=${work.id}`
            });
        };

        // 处理去作品列表按钮点击
        const handleToWorksListButtonClick = () => {
            uni.navigateTo({
                url: '/pages-vote/EntryList'
            });
        };

        // 处理评论按钮点击
        const handleCommentButtonClick = () => {
            uni.showModal({
                title: '写评论',
                editable: true,
                placeholderText: '请输入您的评论...',
                success: (res) => {
                    if (res.confirm && res.content) {
                        // TODO: 提交评论
                        const newComment = {
                            id: commentsList.value.length + 1,
                            username: '我',
                            avatar: '/static/images/avatar-default.jpg',
                            content: res.content,
                            createTime: new Date().toLocaleString()
                        };
                        commentsList.value.unshift(newComment);
                        workDetail.value.comments += 1;
                        uni.showToast({
                            title: '评论成功',
                            icon: 'success'
                        });
                    }
                }
            });
        };

        // 处理底部导航点击
        const handleTabClick = (item) => {
            console.log('切换到:', item.path);
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            // 可以在这里加载实际数据
            loadWorkDetail();
        });

        // 加载作品详情数据
        const loadWorkDetail = async () => {
            try {
                // TODO: 调用实际接口获取数据
                // const res = await getWorkDetail(this.$route.query.id);
                // workDetail.value = res.detail;
                // relatedWorks.value = res.related;
                // commentsList.value = res.comments;
            } catch (error) {
                console.error('加载作品详情失败:', error);
                uni.showToast({
                    title: '加载数据失败',
                    icon: 'none'
                });
            }
        };

        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            headerHeight,
            bottomHeight,
            workDetail,
            relatedWorks,
            commentsList,

            // 方法函数
            handleHeaderHeightChange,
            handleBottomHeightChange,
            handleVoteButtonClick,
            handleRelatedWorkClick,
            handleToWorksListButtonClick,
            handleCommentButtonClick,
            handleTabClick,
            loadWorkDetail
        };
    },
    // 组件之间交互事件
    methods: {

    },
    // 生命周期 - 创建完成（访问DOM元素）
    beforeCreate() {

    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问当前this实例）
    mounted() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    beforeUpdate() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    updated() {

    },
    // 生命周期 - 销毁之前（访问当前this实例）
    unmounted() {

    },
    // 生命周期 - 组件激活（访问当前this实例）
    activated() {

    },
    // 生命周期 - 组件停用（访问当前this实例）
    deactivated() {

    },
    // 生命周期 - 子孙组件错误时
    errorCaptured() {

    }
});
</script>
<style lang='less' scoped>
/* scoped 使用得定义的样式只在本页面内生效  */
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-top: v-bind('headerHeight + "px"');
    padding-bottom: v-bind('bottomHeight + "px"');

    // 作品展示区
    .work-showcase {
        position: relative;
        width: 100%;
        height: 500rpx;
        overflow: hidden;

        .work-image {
            width: 100%;
            height: 100%;
        }

        .work-overlay {
            position: absolute;
            top: 20rpx;
            right: 20rpx;

            .work-rank {
                background-color: #ff4757;
                color: #ffffff;
                padding: 8rpx 20rpx;
                border-radius: 30rpx;
                font-size: 24rpx;
                font-weight: bold;
            }
        }
    }

    // 作品信息区
    .work-info-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .work-header {
            margin-bottom: 20rpx;

            .work-title {
                font-size: 36rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }

            .work-author {
                font-size: 28rpx;
                color: #666;
            }
        }

        .work-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30rpx;
            padding: 20rpx 0;
            border-top: 1rpx solid #f2f2f2;
            border-bottom: 1rpx solid #f2f2f2;

            .stat-item {
                display: flex;
                flex-direction: column;
                align-items: center;

                .stat-text {
                    font-size: 24rpx;
                    color: #666;
                    margin-top: 8rpx;
                }
            }
        }

        .work-description {
            margin-bottom: 20rpx;

            .desc-title {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 15rpx;
            }

            .desc-content {
                font-size: 28rpx;
                color: #666;
                line-height: 1.6;
            }
        }

        .work-category {
            display: flex;
            align-items: center;

            .category-label {
                font-size: 28rpx;
                color: #666;
            }

            .category-value {
                font-size: 28rpx;
                color: #007AFF;
                font-weight: bold;
            }
        }
    }

    // 投票操作区
    .vote-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        text-align: center;

        .vote-info {
            margin-bottom: 20rpx;

            .vote-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 10rpx;
            }

            .vote-desc {
                font-size: 26rpx;
                color: #666;
            }
        }

        .vote-btn {
            width: 200rpx;
            height: 80rpx;
            background-color: #007AFF;
            color: #ffffff;
            border: none;
            border-radius: 40rpx;
            font-size: 30rpx;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;

            &.voted {
                background-color: #999;
            }
        }
    }

    // 相关作品推荐
    .related-works {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .header-left {
                display: flex;
                align-items: center;

                .section-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-left: 12rpx;
                }
            }

            .header-right {
                display: flex;
                align-items: center;

                .list-link {
                    font-size: 26rpx;
                    color: #666;
                    margin-right: 8rpx;
                }
            }
        }

        .related-list {
            display: flex;
            gap: 20rpx;
            overflow-x: auto;

            .related-item {
                flex-shrink: 0;
                width: 200rpx;

                .related-image {
                    width: 200rpx;
                    height: 150rpx;
                    border-radius: 12rpx;
                    margin-bottom: 10rpx;
                }

                .related-info {
                    .related-title {
                        font-size: 26rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 5rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .related-author {
                        font-size: 22rpx;
                        color: #666;
                        margin-bottom: 5rpx;
                    }

                    .related-votes {
                        font-size: 22rpx;
                        color: #007AFF;
                    }
                }
            }
        }
    }

    // 评论区域
    .comments-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;

            .comments-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .comment-btn {
                padding: 10rpx 20rpx;
                background-color: #007AFF;
                color: #ffffff;
                border-radius: 20rpx;
                font-size: 26rpx;
            }
        }

        .comments-list {
            .comment-item {
                display: flex;
                margin-bottom: 20rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                .comment-avatar {
                    margin-right: 15rpx;

                    .avatar-image {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                    }
                }

                .comment-content {
                    flex: 1;

                    .comment-user {
                        font-size: 26rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 8rpx;
                    }

                    .comment-text {
                        font-size: 28rpx;
                        color: #666;
                        line-height: 1.5;
                        margin-bottom: 8rpx;
                    }

                    .comment-time {
                        font-size: 22rpx;
                        color: #999;
                    }
                }
            }
        }
    }
}
</style>